/// <reference path="references.scss" />


// Responsive Typo
// ==============================================================

@include media-breakpoint-down(md) {
    @if ($font-size-root-md != '16px') {
        html {
            font-size: $font-size-root-md;
        }
    }
}

@include media-breakpoint-down(sm) {
    @if ($font-size-root-sm != '16px') {
        html {
            font-size: $font-size-root-sm;
        }
    }
}

//
// Layout
// --------------------------------------------------

html {
    width: 100%;
    height: 100%;
}

body { 
    background: $site-bg;
    // INFO: Sticky elements won't work anymore with overflow-x: hidden on #page element
    overflow-x: hidden; 

    &.popup { 
        padding: 1.25rem; 
        background: $body-bg;
    }

    &.popup .dispensable { 
        display: none !important;
    }

    &.bare {
        padding: 0;
        margin: 0;
        background: $body-bg;
        border: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }
}

.touchevents body:not(.has-sticky-content):not(.content-overflow-initial) #page {
    // INFO: Sticky elements won't work anymore with overflow-x: hidden on #page element
    // INFO 2: apparently without 'overflow-x: hidden' #page gets very glitchy on mobile. Observe this and leave it active for now.
    overflow-x: hidden;
}

#header {
    background-color: $header-bg;
    position: sticky;
    top: 0;
    z-index: 101;
}

#content-wrapper {
    min-height: 300px;
    overflow-x: hidden;
}

#content {
    margin-top: var(--content-margin-top, 1.5rem);
    margin-bottom: var(--content-margin-bottom, 1.5rem);
}

.page-main {
    position: relative;
    z-index: 1;
    background: $body-bg;
    box-shadow: 0 0 24px rgba($black, 0.2);
    min-height: 100vh;
}

@media screen {
    .boxed {
        .page-main {
            margin-left: auto;
            margin-right: auto;
            @include make-container-max-widths();
        }
    
        .page-main .container {
            padding-left: $grid-gutter-width / 2;
            padding-right: $grid-gutter-width / 2;
        }

        @include media-breakpoint-up(sm) {
            .page-main {
                border: 1px solid rgba(#000, 0.2);
                border-top-width: 0;
                border-bottom-width: 0;

                .container {
                    padding-left: $grid-gutter-width;
                    padding-right: $grid-gutter-width;
                }
            }
        }
    }
}

//
// 'Scroll to top' button
// --------------------------------------------------

#scroll-top {
    position: fixed;
    z-index: $offcanvas-z-index - 1;
    bottom: 1rem;
    inset-inline-end: 1rem;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    color: var(--body-color) !important;
    text-decoration: none;
    opacity: 0;
    transform: scale(0.7);
    transition-property: transform, opacity;
    transition-duration: .2s;
    transition-timing-function: ease-in;
    pointer-events: none;

    --shadow-intensity: 1.25;

    &:active {
        --shadow-intensity: 2;
    }

    &.in {
        transform: scale(1);
        pointer-events: initial;
        opacity: 0.7;

        @include media-breakpoint-up(md) {
            opacity: 1;
        }
    }
}

// Typo
// -----------------------------------------------------

b, strong {
    font-weight: $font-weight-medium;
}


// Components
// -----------------------------------------------------

.dropdown-menu {
	--shadow-intensity: #{$dropdown-shadow-intensity};
}

// Class to turn off overflow-x: hidden on #content-wrapper
// INFO: We added overflow-x: hidden to #content-wrapper 
// to prevent a bug with megasized stories, where on page 
// reload the whole page would be shifted to the left.
// This class is used to turn this off for specific pages 
// where this is not needed & causes issues with sticky 
// elements (e.g. .cart-footer).
// -----------------------------------------------------

.content-overflow-initial {
    #content-wrapper {
        overflow-x: initial;
    }
}